<template>

  <el-card class="box-card">
    <h3>单词维护</h3>
    <el-button color="#626aef" class="text item" @click="chooseTable(0)">中小学词表</el-button>
    <el-button color="#626aef" class="text item" @click="chooseTable(1)" :dark="isDark" plain>高中词表</el-button>
    <el-button color="#626aef" class="text item" @click="chooseTable(2)">CET_4</el-button>
    <el-button color="#626aef" class="text item" @click="chooseTable(3)" :dark="isDark" plain>CET_6</el-button>
    <el-button color="#626aef" class="text item" @click="chooseTable(4)">考研词汇</el-button>
    <el-button color="#626aef" class="text item" @click="chooseTable(5)" :dark="isDark" plain>总词表</el-button>
  </el-card>
  <el-dialog v-model="visible" :show-close="false" style="width: 60%">
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <el-button type="danger" @click="close" circle>
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
    </template>
    <h2>{{tableTitle}}</h2>
    <el-form >
      <el-form-item  label="单词" style="width: 200px">
        <el-input v-model="searchForm.searchWord"/>
      </el-form-item>
      <el-form-item  label="释义" style="width: 200px">
        <el-input v-model="searchForm.searchTranslation"/>
      </el-form-item>
      <el-button @click="search">搜索</el-button>
    </el-form>
    <el-table :data="tableData" style="width: 1000px">
    <el-table-column prop="id" label="id" width="250px" />
    <el-table-column prop="word" label="单词" width="250px" />
    <el-table-column prop="translation" label="解释" width="250px"/>
    <el-table-column prop="do" label="操作" width="250px">
      <template #default>
        <el-button  type="Info" color="#f6e8fc"  circle><el-icon><Edit/></el-icon></el-button>
        <el-button  type="danger" circle ><el-icon><Delete/></el-icon></el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <div class="demonstration">页码</div>
      <el-pagination
          v-model:current-page="this.currentPage"
          v-model:page-size="this.pageSize"
          :page-sizes="[10, 20,50, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>

</template>
<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name:"wordDepander",
  data(){
    return{
      searchForm : {
        searchWord : "",
        searchTranslation: ""
      },
      total : 0,
      table : 0,
      small: false,
      background: false,
      disabled: false,
      tableTitle:null,
      currentPage : 1,
      pageSize : 10,
      tableData:[{
        id:1,
        word:'word',
        translation:'单词'
      }],
      wordTable:['school','high_school','CET_4','CET_6','postgraduata_word','enwords'],
      visible:false
    }
  },watch :{
    currentPage(){
        console.log(this.currentPage)
        this.getWordTable()
    },
    pageSize(){
        console.log(this.pageSize)
        this.getWordTable()
    }
  },
  methods:{
    chooseTable(table){
      this.table = table
      this.visible = true;
      this.tableTitle = this.wordTable[table]
      this.getWordTable()
    },
    /*搜索单词*/
    search(){
      if(this.searchForm.searchTranslation == "" && this.searchForm.searchWord == "") ElMessage.warning("请填写单词或者释义")
      else {
        axios({
          method:"POST",
          url:"http://39.101.199.5:8888/SuJiWords/enWords/searchWords",
          data: JSON.stringify({"word":this.searchForm.searchWord, "translation":this.searchForm.searchTranslation,"pageNum":this.currentPage, "pageSize":this.pageSize, "table":this.table}),
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(
            response => (this.tableData = response.data.data.res,this.total =response.data.data.total )
        )
      }
    },
    getWordTable(){
      console.log(this.currentPage, this.pageSize, this.table)
      axios({
        method:"POST",
        url:("http://39.101.199.5:8888/SuJiWords/enWords/selTableWords"),
        data: JSON.stringify({"pageNum":this.currentPage, "pageSize":this.pageSize, "table":this.table}),
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(
          response => (this.tableData = response.data.data.res,this.total =response.data.data.total ,console.log(response.data))
      )
    }
  ,
    close(){
      this.searchForm.searchTranslation = ""
      this.searchForm.searchWord = ""
      this.table = 0
      this.currentPage = 1
      this.pageSize = 10
      this.total = 0
      this.visible = false
      this.tableData = null
    }
  }
}
</script>


<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  border-bottom: solid gray 1px;
  margin: 20px;
  width: 100px;
  height: 50px;
}

.box-card {
  width: 82%;
  height: 90%;
}
</style>